<template>
	<!-- 签名横屏 -->
	<view class="signa">
		<canvas class="canvas" disable-scroll="true" canvas-id="designature" id="designature" @touchstart="starts"
			@touchmove="moves" @touchend="end" />
		<!-- 旋转后的 -->
		<canvas class="canvasImg" canvas-id="designature2" id="designature2" />
		<view class="tips">请在空白区域内书写</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultUrl: "",
				cxt: null,
				cxt2: null,
				line: [],
				width: 0,
				height: 0,
				radius: 0,
				isSign: false, //判断是否已经签字
			};
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select(".signa")
				.boundingClientRect((rect) => {
					this.width = rect.width;
					this.height = rect.height;
				})
				.exec();
		},
		created() {
			this.cxt = uni.createCanvasContext("designature", this);
			this.cxt2 = uni.createCanvasContext("designature2", this);
		},
		methods: {
			end(e) {
				console.log(e);
			},
			distance(a, b) {
				let x = b.x - a.x;
				let y = b.y - a.y;
				return Math.sqrt(x * x + y * y);
			},
			starts(e) {
				this.line.push({
					points: [{
						time: new Date().getTime(),
						x: e.touches[0].x,
						y: e.touches[0].y,
						dis: 0,
					}, ],
				});
				let currentPoint = {
					x: e.touches[0].x,
					y: e.touches[0].y,
				};
				this.currentPoint = currentPoint;
				this.drawer(this.line[this.line.length - 1]);
			},
			moves(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y,
				};
				this.lastPoint = this.currentPoint;
				this.currentPoint = point;
				this.line[this.line.length - 1].points.push({
					time: new Date().getTime(),
					x: e.touches[0].x,
					y: e.touches[0].y,
					dis: this.distance(this.currentPoint, this.lastPoint),
				});
				this.drawer(this.line[this.line.length - 1]);
			},
			drawer(item) {
				let x1,
					x2,
					y1,
					y2,
					cx,
					cy,
					t = 0.5,
					x,
					y;
				let time = 0;
				if (item.points.length > 2) {
					let lines = item.points[item.points.length - 3];
					let line = item.points[item.points.length - 2];
					let end = item.points[item.points.length - 1];
					x = line.x;
					y = line.y;
					x1 = lines.x;
					y1 = lines.y;
					x2 = end.x;
					y2 = end.y;
					let dis = 0;
					time = line.time - lines.time + (end.time - line.time);
					dis = line.dis + lines.dis + end.dis;
					let cxt = this.cxt;
					let or = Math.min((time / dis) * this.linePressure + this.lineMin, this.lineMax);
					cx = (x - Math.pow(1 - t, 2) * x1 - Math.pow(t, 2) * x2) / (2 * t * (1 - t));
					cy = (y - Math.pow(1 - t, 2) * y1 - Math.pow(t, 2) * y2) / (2 * t * (1 - t));
					cxt.setLineCap("round");
					cxt.beginPath();
					cxt.setStrokeStyle("black");
					cxt.setLineWidth(5);
					cxt.moveTo(x1, y1);
					cxt.quadraticCurveTo(cx, cy, x2, y2);
					cxt.stroke();
					cxt.draw(true);
					this.isSign = true;
				}
			},
			// 清除
			clear() {
				this.cxt.clearRect(0, 0, 1000, 1000);
				this.cxt.draw();
				this.line = [];
				this.isSign = false;
			},
			// 保存
			save() {
				if (!this.isSign) {
					uni.showToast({
						title: "请先签字再保存",
						icon: "none",
					});
					return;
				}
				uni.canvasToTempFilePath({
						canvasId: "designature",
						fileType: "png",
						quality: 1, //图片质量
						success: (res) => {
							// this.$emit('getImg',res.tempFilePath)
							// 旋转角度
							this.rotate(res.tempFilePath);
						},
						fail(e) {
							console.log(e);
						},
					},
					this
				);
			},
			//旋转图片
			rotate(tempFilePath) {
				let width = this.height;
				let height = this.width;
				let ctx = this.cxt2;
				ctx.translate(width / 2, height / 2);
				ctx.rotate((270 * Math.PI) / 180);
				ctx.drawImage(tempFilePath, -height / 2, -width / 2, height, width / 1.6);
				ctx.draw(false, (data) => {
					uni.canvasToTempFilePath({
						width: width,
						height: height,
						canvasId: "designature2",
						fileType: "png",
						quality: 1, //图片质量
						success: (res2) => {
							this.$emit("getImg", res2.tempFilePath);
							this.isSign = false
						},
					});
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.signa {
		position: relative;
		overflow: hidden;
		background-color: #fff;
		height: 100%;
		width: 100%;

		.canvas {
			background-color: transparent;
			position: relative;
			z-index: 9999;
			width: 100%;
			height: 100%;
		}

		.tips {
			// 文字旋转
			position: absolute;
			transform: rotate(90deg);
			top: 150rpx;
			right: -100rpx;
			color: #999999;
			font-size: 32rpx;
		}
	}

	.canvasImg {
		width: 100%;
		height: 750rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}
</style>